<template>
    <el-form-item :label="form_item.fieldName+'：'" :class="form_item.fieldType > 7 ? 'height-auto' : ''" :required="form_item.fieldRequired == '1'">
      <el-input v-if="form_item.fieldType == 1" v-model="form_item.fieldValue" :placeholder="form_item.fieldPlaceholder"></el-input>
      <el-input v-if="form_item.fieldType == 2" v-model="form_item.fieldValue" :placeholder="form_item.fieldPlaceholder" type="number"></el-input>
      <el-radio-group v-if="form_item.fieldType == 3 && getOption(form_item.fieldOption).length <= 2" v-model="form_item.fieldValue">
        <el-radio v-for="(item,index) in getOption(form_item.fieldOption)" :key="index" :label="item"></el-radio>
      </el-radio-group>
      <el-select v-if="form_item.fieldType == 3 && getOption(form_item.fieldOption).length > 2" v-model="form_item.fieldValue" clearable placeholder="请选择">
        <el-option v-for="(item,index) in getOption(form_item.fieldOption)" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-checkbox-group v-if="form_item.fieldType == 4 && getOption(form_item.fieldOption).length <= 2" v-model="checkbox">
        <el-checkbox v-for="(item,index) in getOption(form_item.fieldOption)" :key="index" :label="item"></el-checkbox>
      </el-checkbox-group>
      <el-select v-if="form_item.fieldType == 4 && getOption(form_item.fieldOption).length > 2" v-model="checkbox" multiple collapse-tags clearable placeholder="请选择">
        <el-option  v-for="(item,index) in getOption(form_item.fieldOption)" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-date-picker v-if="form_item.fieldType == 5" v-model="form_item.fieldValue" type="date" size="small" value-format="yyyy-MM-dd" placeholder="请选择"></el-date-picker>
      <el-time-select v-if="form_item.fieldType == 6" v-model="form_item.fieldValue" :picker-options="{start: '00:00', step: '00:01', end: '23:59'}" placeholder="请选择"></el-time-select>
      <el-date-picker v-if="form_item.fieldType == 7" v-model="form_item.fieldValue" type="datetime" size="small" value-format="yyyy-MM-dd hh:mm" placeholder="请选择"></el-date-picker>
      <my-upload v-if="form_item.fieldType == 8" :value.sync="form_item.fieldValue" list-type="picture-card" :is-show-tip="false" />
      <my-upload v-if="form_item.fieldType == 9" :value.sync="form_item.fieldValue" :is-show-tip="false"  />
    </el-form-item>
</template>

<script>
import MyUpload from '@/components/MyUpload';
export default {
  components: { MyUpload},
  props:{
    formObj:{
      type: Object,
    }
  },
  data(){
    return{    
      /*  
      form_item:{
        fieldAudit: null, // 是否需要审核（0、非必须、1、必须）
        fieldId: null,
        fieldName: null, // 字符名称
        fieldOption: null, //选项（多个用，隔开）
        fieldPlaceholder: null, //提示语
        custSupRequired: null, //客户/供应商填写（0、选填；1、必填）
        fieldRequired: null, //平台填写（0、选填；1、必填）
        fieldSort: null, //排序
        fieldType: null, // 字段类型（1、文本输入框；2、数字输入框；3、单选；4、多选；5、日期选择；6、时分选择；7、日期时分；8、图片上传；9、文件上传;10、平台评分；11、任务评分；12、特殊评分）
        customeVisible: null, //客户可见(0、不可见，1、可见)
        supplierVisible: null, //供应商可见(0、不可见，1、可见)
        historyValue: null, //历史字段值
        planId: null, //项目执行方案id
        status: null, //状态（0、禁用；1、启用）
        templateId: null, //字段值
        value: null,
        fieldDefaultScore:null, //默认分值
        fieldMaxScore: null,	//最大分值	
        fieldMinScore: null,	//最小分值
        fieldWeight: null, //权重
      },
      */
     checkbox: [],// 针对多选的情况，响应值是数组
    }
  },
  
  computed:{
    form_item(){
      if(this.formObj.fieldValue){
        if(this.formObj.fieldValue.indexOf(',') == -1){
          this.checkbox = [this.formObj.fieldValue];
        }else{
          this.checkbox = this.formObj.fieldValue.split(',');
        }    
      }else{
        this.checkbox = []
      } 
      return this.formObj;
    },
  },
  watch:{
    checkbox(newVal,oldVal){
      this.form_item.fieldValue = newVal.join(',');
    },
    form_item:{
      handler(newVal, oldVal){
        this.$emit('update:formObj', newVal);
      },
      immediate: true,
      deep: true,
    }
  },
  methods:{
    getOption(val){
      if(val){
        if(val.indexOf(',') == -1){
          return [val]
        }else{
          return val.split(',');
        }
      }else{
        return [];
      }      
    },
  }
}
</script>

<style>

</style>